{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Buttons{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/buttons/awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
	{# Color Adjustable & Liquid CSS Buttons #}
	<link href="{{ asset('bundles/applicationtools/css/buttons/sample.css') }}" rel="stylesheet" type="text/css" media="all" />
	<!-- iphone style -->
	<link href="{{ asset('bundles/applicationtools/css/form_elements/style_iphone.css') }}" rel="stylesheet" type="text/css" media="all" />
	<!-- ezmark style -->
	<link href="{{ asset('bundles/applicationtools/css/form_elements/ezmark.css') }}" rel="stylesheet" type="text/css" media="all" />
	<!-- ui.checkBox-Script -->
	<link href="{{ asset('bundles/applicationtools/css/form_elements/ui-checkBox-Script.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
	<!-- iphone style -->
	<script type="text/javascript">
	$(document).ready( function(){ 
		$(".cb-enable").click(function(){
			var parent = $(this).parents('.switch');
			$('.cb-disable',parent).removeClass('selected');
			$(this).addClass('selected');
			$('.checkbox',parent).attr('checked', true);
		});
		$(".cb-disable").click(function(){
			var parent = $(this).parents('.switch');
			$('.cb-enable',parent).removeClass('selected');
			$(this).addClass('selected');
			$('.checkbox',parent).attr('checked', false);
		});
	});
	</script>
	
	<!-- ezmark style -->
	<script src="{{ asset('bundles/applicationtools/js/form/jquery.ezmark.js') }}" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready( function(){
		$('.defaultP input').ezMark();
		$('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});
		$('#iphoneP input').ezMark({checkboxCls:'ez-checkbox-iphone', checkedCls: 'ez-checked-iphone'});
		
		
		// check all functionality
		$('#checkAllBtn').click(function(e) {
			$('input[name^="item"]').each(function() {
				$(this).attr({"checked":"checked"});
				$(this).trigger('change');
			});
			return false;
		});


		// uncheck all functionality
		$('#uncheckAllBtn').click(function(e) {
			$('input[name^="item"]').each(function() {
				$(this).removeAttr('checked');
				$(this).trigger('change');
			});
			return false;
		});


	});	
	</script>
	
	<!-- ui.checkBox-Script -->
	
	<script src="{{ asset('bundles/applicationtools/js/form/ui-checkBox-Script/jquery.ui.widget.js') }}" type="text/javascript"></script>
	<script src="{{ asset('bundles/applicationtools/js/form/ui-checkBox-Script/ui.checkbox.js') }}" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(function(){

			$('input.visible_element').checkBox();
			
			$('#check-toggle-all').click(function(){
				$('#example input[type=checkbox]').checkBox('toggle');
				return false;
			});
			
			$('#check-all').click(function(){
				$('#example input[type=checkbox]').checkBox('changeCheckStatus', true);
				return false;
			});
			$('#uncheck-all').click(function(){
				$('#example input[type=checkbox]').checkBox('changeCheckStatus', false);
				return false;
			});
			$('#check-2').click(function(){
				$('#example input[type=radio]:eq(1)').checkBox('changeCheckStatus', true);
				return false;
			});
			$('#native').click(function(){
				//native methods
				$('#example input[type=radio]:eq(0)').attr({checked: true, disabled: true})
					//reflect the current state
					.checkBox('reflectUI');
				return false;
			 });
			 $('#native-prop').click(function(){
				//native methods
				$('#example input[type=radio]:eq(2)').prop({checked: true});
				return false;
			 });

            $('input.radio_hidden').checkBox({addVisualElement: false});
			$('input.checkBox_hidden').checkBox({addVisualElement: false});

		});
	</script>
	
	
{% endblock %}

{% block body %}

<div class="section">
    <div class="grid_16">
        <h4>Buttons</h4>
    </div>
    <div class="clear"></div>
</div>



    <div id="grid">
        <div class="grid_8">
            <div class="container">
                <div class="row">
                    <div class="col_3">
						<a class="large awesome">Super Awesome Button &raquo;</a> <br/><br/>
						<a class="large blue awesome">Awesome Blue Button &raquo;</a> <br/><br/>
						<a class="large magenta awesome">Awesome Magenta Button &raquo;</a> <br/><br/>
						<a class="large red awesome">Awesome Red Button &raquo;</a> <br/><br/>
						<a class="large orange awesome">Awesome Orange Button &raquo;</a> <br/><br/>
						<a class="large yellow awesome">Awesome Yellow Button &raquo;</a> 
                    </div>
                    <div class="col_3">
						<a class="medium awesome">Super Awesome Button &raquo;</a> <br/><br/>
						<a class="medium blue awesome">Awesome Blue Button &raquo;</a> <br/><br/>
						<a class="medium magenta awesome">Awesome Magenta Button &raquo;</a> <br/><br/>
						<a class="medium red awesome">Awesome Red Button &raquo;</a> <br/><br/>
						<a class="medium orange awesome">Awesome Orange Button &raquo;</a> <br/><br/>
						<a class="medium yellow awesome">Awesome Yellow Button &raquo;</a> 
					</div>
                    <div class="col_3">
						<a class="small awesome">Super Awesome Button &raquo;</a> <br/><br/>
						<a class="small blue awesome">Awesome Blue Button &raquo;</a> <br/><br/>
						<a class="small magenta awesome">Awesome Magenta Button &raquo;</a> <br/><br/>
						<a class="small red awesome">Awesome Red Button &raquo;</a> <br/><br/>
						<a class="small orange awesome">Awesome Orange Button &raquo;</a> <br/><br/>
						<a class="small yellow awesome">Awesome Yellow Button &raquo;</a> 
					</div>
                </div>
            </div>
			
            <div class="container">
                <div class="row">
                    <div class="col_1">
						<h3>Color Adjustable &amp; Liquid CSS Buttons - <a target="_blank" href="http://tutorials.makecolor.in/demo/ColorAdjustable/index.htm">Source</a></h3>

						<div class="btn"><a href="#">Default Adjustable &amp; Liquid Button</a><span></span></div>
						<div class="clear"></div>
						<strong>Easily Adjustable Colors</strong>

						<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div>
						<div class="clear"></div>
						Background Color: Green

						<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div>
						<div class="clear"></div>
						Background Color: Red

						<div class="btn btn_learnmore"><a href="#">Learn More</a><span></span></div>
						<div class="clear"></div>
						Background Color: Orange

						<div class="btn btn_try"><a href="#">You Should Give it a Try</a><span></span></div>
						<div class="clear"></div>
						Background Color: #002c85
					</div>
                </div>
            </div>
			
        </div>
        <div class="grid_8">
            <div class="container">
                <div class="row">
                    <div class="col_3">
						<button class="large awesome">Super Awesome Button &raquo;</button> <br/><br/>
						<button class="large blue awesome">Awesome Blue Button &raquo;</button> <br/><br/>
						<button class="large magenta awesome">Awesome Magenta Button &raquo;</button> <br/><br/>
						<button class="large red awesome">Awesome Red Button &raquo;</button> <br/><br/>
						<button class="large orange awesome">Awesome Orange Button &raquo;</button> <br/><br/>
						<button class="large yellow awesome">Awesome Yellow Button &raquo;</button> 
					</div>
                    <div class="col_3">
						<button class="medium awesome">Super Awesome Button &raquo;</button> <br/><br/>
						<button class="medium blue awesome">Awesome Blue Button &raquo;</button> <br/><br/>
						<button class="medium magenta awesome">Awesome Magenta Button &raquo;</button> <br/><br/>
						<button class="medium red awesome">Awesome Red Button &raquo;</button> <br/><br/>
						<button class="medium orange awesome">Awesome Orange Button &raquo;</button> <br/><br/>
						<button class="medium yellow awesome">Awesome Yellow Button &raquo;</button> 
					</div>
                    <div class="col_3">
						<button class="small awesome">Super Awesome Button &raquo;</button> <br/><br/>
						<button class="small blue awesome">Awesome Blue Button &raquo;</button> <br/><br/>
						<button class="small magenta awesome">Awesome Magenta Button &raquo;</button> <br/><br/>
						<button class="small red awesome">Awesome Red Button &raquo;</button> <br/><br/>
						<button class="small orange awesome">Awesome Orange Button &raquo;</button> <br/><br/>
						<button class="small yellow awesome">Awesome Yellow Button &raquo;</button> 
					</div>
                </div>
            </div>
			


        </div>
        <div class="clear"></div>
    </div>
	
	
	
        <div class="grid_16">
            <div class="container">
                <div class="row">
                    <div class="col_3">
						<h2>iPhone Style Radio and Checkbox Switches using JQuery and CSS</h2>
						<h4>From <a href="http://devgrow.com/iphone-style-switches/">iphone-style-switches</a></h4>
						<h3>The Example:</h3>
						<p class="field switch">
							<input type="radio" id="radio1" name="field"  checked />enable
							<input type="radio" id="radio2" name="field" />disable
							<label for="radio1" class="cb-enable selected"><span>Enable</span></label>
							<label for="radio2" class="cb-disable"><span>Disable</span></label>
							<div class="clear"></div>
						</p>
						<p class="field switch">
							<label class="cb-enable"><span>On</span></label>
							<label class="cb-disable selected"><span>Off</span></label>
							<input type="checkbox" id="checkbox" class="checkbox" name="field2" /> Checkbox
							<div class="clear"></div>
						</p>
						
						
					</div>
                    <div class="col_3">
					
						<h2>Example</h2>
						<h4>From <a href="http://www.itsalif.info/content/demo-ezmark-jquery-plugin/">ezmark</a></h4>
						<h4><a href="http://github.com/itsalif/ezMark">Download from Github</a></h4>
						<div class="example">

							<form id="testForm" action="#" method="post">
								<p class="defaultP">
									Single Checkbox Demo: <br />
									<input type="checkbox" name="soccer_like" value="1" id="soccer_like"><label for="soccer_like">I like Soccer</label>	
								</p>	
								<p class="defaultP">
									Shopping Items (Multiple Checkbox): <br />
									<input type="checkbox" name="item[]" id="banana" value="banana" /> <label for="banana">Banana</label> <br />
									<input type="checkbox" name="item[]" id="apple" value="apple" /> <label for="apple">Apple</label> <br />
									<input type="checkbox" name="item[]" id="coke" value="coke" /> <label for="coke">Coke</label> <br />
									<input type="checkbox" name="item[]" id="pineapple" value="pineapple" /> <label for="pineapple">Pineapple</label> <br />
								</p>
								<div class="select-deselect">
									<input type="button" name="checkAll" id="checkAllBtn" value="Select All" /> <input type="button" name="uncheckAll" id="uncheckAllBtn" value="Deselect All" />  
								</div>

								<p class="defaultP">
									House contract (Grouped Radio button): <br />
									<input type="radio" name="month" value="6" id="month6" /> <label for="month6">6 month Contract</label> <br />
									<input type="radio" name="month" value="3" id="month3" /> <label for="month3">3 month Contract</label> <br />	
									<input type="radio" name="month" value="12" id="month12" /> <label for="month12">12 month Contract</label> <br />
								</p>

								<p class="customP">
									Custom Checkbox: <br />
									<input type="checkbox" name="jquery_like" id="jquery_like" value="1" /><label for="jquery_like">I Like jQuery</label>
								</p>	
								
								<p class="iphone-ui" id="iphoneP">
									By creating custom CSS classes, the checkbox icon can be customized very easily. Below is an example: <br />
									<label for="iphone"><b>iPhone style checkbox?</b></label> <br />
									<input type="checkbox" name="iphone" id="iphone" value="2" />
								</p>

								<input type="submit" name="Submit" value="Submit me!" />
								
								<p>
									<a class="buttonG green medium" href="http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin">&raquo; Back to Reading ezMark</a>
									<a class="buttonG orange medium" href="http://plugins.jquery.com/project/ezmark" class="icon-link download">Download from jQuery Server</a>
									<a class="buttonG gray medium" href="http://github.com/itsalif/ezMark" title="ezmark jQuery Plugin">Download from Github</a>
								</p>
							</form>
							
							
						</div>
						
					</div>
                    <div class="col_3">
						<h2>jQuery UI: Radiobutton- und Checkbox-Replacement</h2>

						<ul>
							<li><a target="_blank" href="https://github.com/aFarkas/accessible--stylable-Radiobuttons-and-Checkboxes/downloads">ui.checkBox-Script (download)</a></li>
							<li><a target="_blank" href="https://github.com/aFarkas/accessible--stylable-Radiobuttons-and-Checkboxes/issues">ui.checkBox-Script (bugtracker)</a></li>
							<li><a target="_blank" href="http://plugins.jquery.com/project/usermode">jquery.usermode-Script (optional)</a></li>
						</ul>
						<form action="#">
							<fieldset>
								<div><input id="c1" class="visible_element" type="checkbox"/> <label for="c1">CheckBox 1</label></div>
								<div><input id="c2" class="visible_element" type="checkbox"/> <label for="c2">CheckBox 2</label></div>
								<div><input id="c3" class="visible_element" type="checkbox"/> <label for="c3">CheckBox 3</label></div>
							</fieldset>
							<fieldset>
								<div><input name="radio" id="c4" class="visible_element" type="radio"/> <label for="c4">Radio 1</label></div>
								<div><input name="radio" id="c5" class="visible_element" type="radio"/> <label for="c5">Radio 2</label></div>
								<div><input name="radio" id="c6" class="visible_element" type="radio"/> <label for="c6">Radio 3</label></div>
							</fieldset>
						</form>
						<hr/>
						

						<form id="example" action="#">
							<fieldset>
								<div><input id="c7" class="visible_element" type="checkbox"/> <label for="c7">CheckBox 1</label></div>
								<div><input id="c8" class="visible_element" type="checkbox"/> <label for="c8">CheckBox 2</label></div>
								<div><input id="c9" class="visible_element" type="checkbox"/> <label for="c9">CheckBox 3</label></div>
							</fieldset>
							<div>
								<button id="check-toggle-all">toggle all</button> <button id="check-all">check all</button> <button id="uncheck-all">uncheck all</button>
							</div>

							<fieldset>
								<div><input name="radio" id="c14" class="visible_element" type="radio"/> <label for="c14">Radio 1</label></div>
								<div><input name="radio" required id="c15" class="visible_element" type="radio"/> <label for="c15">Radio 2</label></div>
								<div><input name="radio" id="c16" class="visible_element" type="radio"/> <label for="c16">Radio 3</label></div>
							</fieldset>
							<div>
								<button id="check-2">check second</button>
								<button id="native">native methode + ui-reflection</button>
								<button id="native-prop">only prop (check third)</button>
							</div>
						</form>

						<hr/>
						<form action="#" class="button-style">
							<fieldset>
								<div><input class="radio_hidden" name="radio" id="c80" type="radio"/> <label for="c80">Radio 1</label></div>
								<div><input class="radio_hidden" name="radio" id="c90" type="radio"/> <label for="c90">Radio 2</label></div>
								<div><input class="radio_hidden" name="radio" id="c100" type="radio"/> <label for="c100">Radio 3</label></div>
							</fieldset>
							
							<fieldset>
								<div><input class="checkBox_hidden" id="c7x" type="checkbox"/> <label for="c7x">CheckBox 1</label></div>
								<div><input class="checkBox_hidden" id="c8x" type="checkbox"/> <label for="c8x">CheckBox 2</label></div>
								<div><input class="checkBox_hidden" id="c9x" type="checkbox"/> <label for="c9x">CheckBox 3</label></div>
							</fieldset>
						</form>
						
						
					</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

{% endblock %}